<template>
  <div class="qrcode-conter" v-if="async">
    <div class="conter-bg">
      <div class="conter-img">
        <img class="conter-bgimg" :src="$ala.urlImage(canvasItem.bPicture)" />
        <vue-draggable-resizable :x="relaArray.x" :y="relaArray.y" :w="relaArray.size" :h="relaArray.size" @dragging="onDrag" @resizing="onResize" :parent="true" v-if="canvasItem.codeImg">
          <img style="height: 100%; width: 100%;" :src="$ala.urlImage(canvasItem.codeImg)" />
        </vue-draggable-resizable>
      </div>
    </div>
    <div class="qrcode-arg">
      <div class="qrcode-arg_li" v-if="false">
        <div class="qrcode-arg_text">背景图片</div>
        <div class="qrcode-arg_upload">
          <img class="qrcode-arg_img" :src="canvasItem.bPicture" />
          <!-- <x-select-image v-model="canvasItem.bPicture"></x-select-image> -->
        </div>
      </div>
      <div class="qrcode-arg_li" v-if="false">
        <div class="qrcode-arg_text">二维码</div>
        <div class="qrcode-arg_upload">
          <img class="qrcode-arg_img" :src="canvasItem.codeImg" />
          <!-- <x-select-image v-model="canvasItem.codeImg"></x-select-image> -->
        </div>
      </div>
      <div class="qrcode-arg_li" v-if="false">
        <div class="qrcode-arg_text">二维码图标</div>
        <div class="qrcode-arg_upload">
          <x-select-image v-model="canvasItem.icon"></x-select-image>
        </div>
      </div>
      <div class="qrcode-arg_li" v-if="false">
        <div class="qrcode-arg_text">二维码文字</div>
        <div class="qrcode-arg_upload">
          <el-input v-model="canvasItem.text" placeholder="请输入二维码文字内容"></el-input>
        </div>
        <div class="qrcode-arg_intro">二维码文字内容，可以使网址、微信号、公众号、文字等内容。不能超过255个字</div>
      </div>
      <div class="qrcode-arg_li" v-if="false">
        <div class="qrcode-arg_text">画布大小</div>
        <div class="qrcode-ipt">
          <div class="qrcode-ipt_list">
            <div class="qrcode-ipt-tx">宽</div>
            <el-input-number v-model="canvasItem.width" :min="0"></el-input-number>
          </div>
          <div class="qrcode-ipt_list">
            <div class="qrcode-ipt-tx">高</div>
            <el-input-number v-model="canvasItem.height" :min="0"></el-input-number>
          </div>
        </div>
      </div>
      <div class="qrcode-arg_li">
        <div class="qrcode-arg_text">二维码大小</div>
        <div class="qrcode-ipt">
          <div class="qrcode-ipt_list">
            <div class="qrcode-ipt-tx">宽/高</div>
            <el-input-number v-model="canvasItem.size" :min="0"></el-input-number>
          </div>
        </div>
      </div>
      <div class="qrcode-arg_li">
        <div class="qrcode-arg_text">二维码位置</div>
        <div class="qrcode-ipt">
          <div class="qrcode-ipt_list">
            <div class="qrcode-ipt-tx">X轴</div>
            <el-input-number v-model="canvasItem.x" :min="0"></el-input-number>
          </div>
          <div class="qrcode-ipt_list">
            <div class="qrcode-ipt-tx">Y轴</div>
            <el-input-number v-model="canvasItem.y" :min="0"></el-input-number>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import ala from 'ala'
  export default {
    model: {
      prop: 'dataModel',
      event: 'change'
    },
    props: {
      dataModel: {},
      title: {}
    },
    data () {
      return {
        viewModel: [{}],
        canvasItem: {},
        baseUrl: ala.imgHost,
        relaArray: {
          size: 100,
          x: 0,
          y: 0
        },
        ration: 2.16,
        async: false
      }
    },
    mounted () {
      this.init()
      var this_ = this
      this.$bus.$on('change_image', (res) => {
        this_.canvasItem.bPicture = ala.urlImage(res)
      })
    },
    methods: {
      async init () {
        if (this.dataModel.length !== 0) {
          this.tableKey = Math.random()
          if (this.dataModel) {
            this.dataModel.forEach(r => {
              r.typeName = this.getTypeName(r.type)
            })
          }
          this.canvasItem = {
            bPicture: 'https://img.alaboshu.com/wwwroot/uploads/api/242-873-583/2020-11-07/5fa6120415f66d342068b3d6.jpg',
            codeImg: 'https://img.alaboshu.com/wwwroot/uploads/api/242-873-583/2020-11-16/5fb263d69ea93e2e0854eb99.png'
          }
          this.canvasItem = { ...this.canvasItem, ...this.dataModel[0] }
          this.relaArray.x = Math.round((this.canvasItem.x / this.ration))
          this.relaArray.y = Math.round((this.canvasItem.y / this.ration))
          this.relaArray.size = Math.round((this.canvasItem.size / this.ration))
        } else {
          var id = await this.$api.objectId()
          this.canvasItem = {
            id: id,
            type: 1,
            x: 0,
            backgroundColor: '#ffffff',
            foreground: '#000000',
            y: 0,
            size: 100,
            iconSize: 48,
            height: 100,
            color: '#000000',
            width: 100,
            bPicture: '',
            codeImg: '',
            icon: '',
            text: ''
          }
        }
        this.async = true
      },
      tableRowClassName ({ row, rowIndex }) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
      getTypeName (type) {
        if (type === 3) {
          return '图片'
        }
        if (type === 2) {
          return '文本'
        }
        if (type === 1) {
          return '二维码'
        }
      },
      onDrag (...data) {
        this.relaArray.x = data[0]
        this.relaArray.y = data[1]
        this.canvasItem.x = Math.round((data[0] * this.ration))
        this.canvasItem.y = Math.round((data[1] * this.ration))
      },
      onResize (...data) {
        this.relaArray.size = data[2]
        this.canvasItem.size = Math.round(data[2] * this.ration)
      }
    },
    watch: {
      canvasItem: {
        deep: true,
        handler (val) {
          this.relaArray.x = Math.round((val.x / this.ration))
          this.relaArray.y = Math.round((val.y / this.ration))
          this.relaArray.size = Math.round((val.size / this.ration))
          this.viewModel[0] = { ...this.viewModel[0], ...this.canvasItem }
          this.$emit('change', this.viewModel)
        }
      }
    }
  }
</script>
<style lang="scss">
  @import "./setting.scss";
</style>